<template>
	<view class="content">
		<view class="userhome-content">
			<view class="status_bar" :style="{ height: iStatusBarHeight + 'px'}">
			        <!-- 这里是状态栏 -->
			</view>
			<user-home-header></user-home-header>
			<view class="user-info-body">
				<view class="users-info">
					<!-- 用户头像 -->
					<view class="user-avatar">
						<image src="../../static/logo.png" alt=""></image>
					</view>
					<!-- /用户头像 -->
					
					<!-- 用户名等 -->
					<view class="user-message">
						<view class="user-name" @click="toLogin()" v-show="!loginFlag">
							<text>立即登录</text>
						</view>
						<view class="user-name" v-show="loginFlag">
							<text>{{uusername}}</text>
						</view>
						<view class="get-personal">
							<view class="get-medal">
								<text>领取勋章></text>
							</view>
							<view class="personal-homepage">
								<text>个人主页></text>
							</view>
						</view>
					</view>
				</view>
				
			
			</view>
			<user-home-body></user-home-body>
			<user-home-footer></user-home-footer>
		</view>
	</view>
</template>

<script setup>
	import UserHomeHeader from './components/UserHomeHeader/UserHomeHeader.vue'
	import UserHomeBody from './components/UserHomeBody/UserHomeBody.vue'
	import UserHomeFooter from './components/UserHomeFooter/UserHomeFooter.vue'
	import userApi from '../../static/assets/js/userApi.js'
	import { onLoad,onShow } from '@dcloudio/uni-app'
	import { ref,reactive,provide,watch,onMounted } from 'vue'
	const iStatusBarHeight = ref(0)
	const userInfo = ref({})
	
	//
	const loginFlag = ref(false)
	const uusername = ref("")
	// const arrList =ref(Object.keys(userAllInfo.value)) 
	// console.log(userAllInfo.value);
	// console.log("无语");
	
	
	// watch( userAllInfo.value,(newValue,oldValue)=>{
	// 	arrList.value = Object.keys(newValue.value)
	// })
	
	// onMounted(()=>{
	// 	if(arrList.value.length==0){
	// 			loginFlag.value = false
	// 	}else{
	// 			console.log("第一层");
	// 			loginFlag.value = true
	// 			console.log(userAllInfo.value);
				
				
	// 			console.log(arrList);
	// 			if(arrList.value.length!=0){
	// 				console.log("第二层");
	// 				if(userAllInfo.value.username!==undefined){
	// 					// console.log(userAllInfo.value.username);
	// 					username.value = userAllInfo.value.username
	// 					// console.log(username.value);
	// 				}
	// 			}
	// 	}
		
		
	// })
	
	// onShow(()=>{
	// 	console.log(arrList.value.length);
	// 	let user =  uni.getStorageSync("usreInfo")
	// 	console.log(user);
	// })
	
	
	
	
	// const userInfo = uni.getStorageSync("userInfo")
	// console.log(userInfo);
	const toLogin = () =>{
		uni.navigateTo({
			url:'/pages/Login/Login'
		})
	}
	
	
	//
	provide("userInfo",userInfo)
	
	onLoad(()=>{
		iStatusBarHeight.value = uni.getSystemInfoSync().statusBarHeight;
	})
	
	onShow(()=>{
		uni.getStorage({
			key:"token",
			success:function(token) {
				userApi.queryToken(token).then((resp)=>{
					if(resp=="3003"){
						console.log("token失效");
						uni.setStorageSync("token","");
						uni.setStorageSync("userInfo",null);
					}else if(resp=="2002"){
						console.log("token有效");
						uni.getStorage({
							key:"user",
							success:function(res) {
								// console.log(res.data.username);
								const username = res.data.username
								userApi.queryAllUserInfo(username).then((userin)=>{
									userInfo.value = userin
									uni.setStorageSync("userInfo",userin)
									// username.value = uni.getStorageSync("user").data
									console.log(username);
									uusername.value = username
									loginFlag.value = true
									
								})
							}
						})
					}
				})
			}
		})
	})

	
	
	// provide('userInfo',userInfo.value)
	
	// watch( userInfo,(newValue,oldValue)=>{
	// 	provide("userInfo",newValue)
	// })
</script>

<style scoped lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.userhome-content{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 20rpx 20rpx 20rpx 20rpx;
		/* border: 1px black solid; */
	}
	
	//
	uni-image{
		height: 100%;
		width: 100%;
	}
	
	.user-info-body{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		margin-bottom: 29rpx;
		>.users-info{
			margin-left: 25rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.user-avatar{
				height: 150rpx;
				width: 150rpx;
				// border: 1px black solid;
				border-radius: 50%;
				margin-right: 30rpx;
				overflow: hidden;
				>img{
					width: 100%;
				}
			}
			
			
			.user-message{
				
				.user-name{
					font-size: 40rpx;
					font-weight: 700;
				}
				.get-personal{
					margin-top: 10rpx;
					display: flex;
					font-size: 25rpx;
					.get-medal{
						text-align: center;
						background-color: rgb(238, 239, 244);
						border-radius: 20rpx;
						margin-right: 10rpx;
					}
					.personal-homepage{
						text-align: center;
						background-color: rgb(238, 239, 244);
						border-radius: 20rpx;
					}
				}
			}
		}
	}


</style>
